<template>
	<view class="zone">
		<Header title="邮件"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>

			<view class="box">
				<view class="title">
					<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
					<text>收件箱</text>
					<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
				</view>

				<scroll-view scroll-y class="scrollbox" @scrolltolower="scrolltolower">
					<view class="item" v-for="(item , index) in listdata" :key="index">

						<image class="youimg"
							:src="item.state == 0 ? 'http://image.qxgm.site/tdz/img/youchai/mg-01.png':'http://image.qxgm.site/tdz/img/youchai/mg-02.png'"
							mode="widthFix"></image>
						<view class="word">
							<p class="time">{{item.create_date}}</p>
							<p class="shuoming" v-if="item.content">{{item.content.title}}</p>
						</view>
						<view class="tip">
							{{item.state == 0 ? '未读' : item.state == 1 ? '已读' : item.state == 2 ? '已领取' : ''}}
						</view>
						<view class="see" @click="seeOpen(item)">查看</view>

					</view>

					<view class="empty" v-if="listdata == ''">
						<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
						<text class="hui">
							没有数据哦~
						</text>
					</view>
					<u-loadmore v-else :status="status" color="#666" :icon-type="iconType" :load-text="loadText" />
				</scroll-view>


				<view class="sbtns">
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
						class="delete" @click="deletefun">删除已读</u-button>
					<view class="receive" @click="onePress">一键领取</view>
				</view>
			</view>
		</view>


		<!-- 反馈奖励 -->
		<u-mask :show="sucess">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>{{item.title}}</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<p class="tan1">尊敬的玩家您好</p>
							<p class="tan2">{{item.content}}</p>
							<p class="tan2">感谢您的支持，祝您游戏愉快!</p>
						</view>
						<view class="plist">
						    <block v-for="(item , index) in item.reward_list" :key="index">
						        <view class="parts">
						            <view class="sbimg">
						                <image class="tanimg" :src="item.img" mode="widthFix"></image>
						            </view>
						            <view class="toan">
						                {{item.name}}*{{item.num}}
						            </view>
						        </view>
						    </block>    
						</view>
                        <u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
                        	class="getLevel" v-if="state == 2">已领取</u-button>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" v-else @click="againCofirm">领取附件</u-button>
                        
					</view>
				</view>
				<image class="m_close" @click="sucess = false" src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>


		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
                        
                        <view class="plist">
                            <block v-for="(item , index) in item.reward_list" :key="index">
                                <view class="parts">
                                    <view class="sbimg">
                                        <image class="tanimg" :src="item.img" mode="widthFix"></image>
                                    </view>
                                    <view class="toan">
                                        {{item.name}}*{{item.num}}
                                    </view>
                                </view>
                            </block>    
                        </view>
                    
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel2" @click="obtain = false">确定</u-button>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>

        <!-- 一键领取恭喜获得 -->
        <u-mask :show="yijian" @click="yijian = false">
        	<view class="warp2" @tap.stop>
        		<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
        		<view class="mask_content2">
        			<view class="m_info2">
        				<view class="plist">
        					<block v-for="(item , index) in yijianlist" :key="index">
                                <view class="parts">
                                    <view class="sbimg">
                                        <image class="tanimg" :src="item.img" mode="widthFix"></image>
                                    </view>           
                                    <view class="toan">
                                        {{item.name}}*{{item.number}}
                                    </view>
                                </view>
        					</block>
        				</view>
        				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
        					class="getLevel2" @click="yijian = false,yijianlist = []">确定</u-button>
        			</view>
        		</view>
        		<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
        		<view class="dianjireny" @click="yijian = false">
        			点击任意位置退出
        		</view>
        	</view>
        </u-mask>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				listdata: [],
				page: 1,
				max_page: 1,
                yijian:false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				sucess: false,
				obtain: false,
                yijianlist:[],
                id:'',
                state:'',
                item:{}
			}
		},
		onLoad() {
			this.emialpagefun();
		},
		methods: {
			// 邮件列表
			async emialpagefun() {
				let res = await this.$http.index.emialpage({
					page: this.page
				})
				if (res.code == 1) {
					this.max_page = res.data.last_page
					this.listdata = [...this.listdata, ...res.data.data]
					if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
				}
                
			},
            scrolltolower() {
            	if (this.page >= this.max_page) {
            		this.status = 'nomore'
            		return;
            	}
            	this.status = 'loading';
            	this.page = ++this.page;
            	this.emialpagefun();
            	setTimeout(() => {
            		if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
            		else this.status = 'loading';
            	}, 500)
            },
            // 一键领取
            async onePress() {
                if(this.listdata.length == 0){
                    this.$u.toast('暂无邮件')
                    return
                }
                
                this.item = {}
                let res = await this.$http.index.receivebatch({
                    mid:'0'
                })
                
                if (res.code == 1) {
                    this.yijian = true
                    this.yijianlist = res.data
                    setTimeout(()=>{
                        this.listdata = []
                        this.page = 1
                        this.emialpagefun()
                    },200)
                }else{
                    this.$u.toast(res.msg)
                }
            },
            //删除已读
            async deletefun(){
                if(this.listdata.length == 0){
                    this.$u.toast('暂无邮件')
                    return
                }
                
                let res = await this.$http.index.deletebatch({
                    mid: '0'
                })
                this.$u.toast(res.msg)
                if (res.code == 1) {
                    this.listdata = []
                    this.page = 1
                    this.emialpagefun()
                }
            },
            // 查看
            async seeOpen(item) {
                this.id = item.id
                let res = await this.$http.index.emaildl({
                	mid: this.id
                })
                if (res.code == 1) {
                    this.item = res.data.content
                    this.state = res.data.state
                    this.sucess = true 
                    // 通过ID获取索引点击以后变为已读状态
                    let prizeIndex = this.listdata.findIndex(item => {
                    	return item.id === this.id
                    })
                    if(this.listdata[prizeIndex].state == 0){
                        this.$set(this.listdata[prizeIndex], 'state', 1)
                    }            
                }
            },
			// 领取附件
			async againCofirm() {
                let res = await this.$http.index.receive({
                	mid: this.id
                })
                if (res.code == 1) {
                    this.obtain = true
                    this.sucess = false
                    setTimeout(()=>{
                        this.listdata = []
                        this.page = 1
                        this.emialpagefun()
                    },200)
                }else{
                    this.$u.toast(res.msg)
                }
				
			}
            
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;
	}

	.yun {
		position: absolute;
		top: -3%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 10px 6px 0;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.scrollbox {
		height: calc(94vh - 182px);
		overflow-y: scroll;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
		background-size: 100% 100%;
		padding: 0px 0 18px;

		image {
			width: 18%;
		}

		text {
			font-size: 20px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}



	.sbtns {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0vh 16% 3vh;
		margin-top: 3vh;

		.delete {
			width: 113px;
			height: 37px;
			font-size: 18px;
			font-weight: normal;
			color: #c6f4f9;
			line-height: 37px;
			text-shadow: 0 1px 1px #006599;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-03.png) no-repeat;
			background-size: 100% 100%;
		}

		.receive {
			width: 113px;
			height: 37px;
			font-size: 18px;
			font-weight: normal;
			text-align: center;
			line-height: 37px;
			color: #fdf2c5;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		margin-bottom: 2px;
		padding: 12px 8px;
	}

	.youimg {
		width: 15%;
	}

	.see {
		width: 75px;
		height: 33px;
		font-size: 14px;
		font-weight: normal;
		line-height: 33px;
		color: #fdf2c5;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
		background-size: 100% 100%;
	}

	.time {
		font-size: 12px;
		font-weight: normal;
		color: #B76A6C;
		line-height: 24px;
	}

	.shuoming {
		font-size: 15px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
	}

	.tip {
		font-size: 12px;
		font-weight: normal;
		color: #B76A6C;
		line-height: 24px;
		margin-right: 3%;
	}

	.word {
		flex: 1;
	}

	.jihuop {
		padding: 0 9%;
	}

	.tan1 {
		font-size: 16px;
		font-weight: normal;
		color: #333333;
		line-height: 16px;
		margin-bottom: 12px;
	}

	.tan2 {
		font-size: 14px;
		font-weight: normal;
		color: #50433A;
		line-height: 18px;
		text-indent: 2em;
	}

    
    .plist {
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	flex-wrap: wrap;
    	margin-top: 14px;
    
    	.parts {
    		width: 23%;
    		box-sizing: border-box;
    	}
    
    	.sbimg {
    		width: 64px;
    		padding: 2px 5px;
    		background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
    		background-size: 100% 100%;
    		margin: auto;
    	}
    
    	.tanimg {
    		width: 100%;
    	}
    
    	.toan {
    		font-size: 12px;
    		font-weight: normal;
    		color: #333333;
    		line-height: 14px;
    		margin-top: 12px;
    		text-align: center;
    	}
    
    }

	.getLevel {
		display: block;
		width: 116px;
		height: 37px;
		font-size: 18px;
		font-weight: normal;
		line-height: 37px;
		color: #fdf2c5;
		margin: 2vh auto 0;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
		background-size: 100% 100%;
	}

	.getLevel2 {
		display: block;
		width: 116px;
		height: 37px;
		font-size: 18px;
		font-weight: normal;
		line-height: 37px;
		color: #fdf2c5;
		margin: 3vh auto 0;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
		background-size: 100% 100%;
	}
</style>